<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">

</head>

<body>
<div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
        <input id="id" name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <div id="title" style="padding: 9px 15px;">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="min-height: 200px">
            <label class="layui-form-label">题目</label>
            <div class="layui-input-block">
                <div id="content" style="padding: 9px 15px;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">答案</label>
            <div id="shortAnswer" class="layui-input-block" hidden>
                <textarea id="option" name="option" title="答案" class="layui-textarea" lay-verify="option"></textarea>
            </div>
            <div id="options" class="layui-input-block" hidden>
                <input type="radio" id="optionA" name="option" value="A" title="1" lay-filter="filter">
                <input type="radio" id="optionB" name="option" value="B" title="2" lay-filter="filter">
                <input type="radio" id="optionC" name="option" value="C" title="3" lay-filter="filter">
                <input type="radio" id="optionD" name="option" value="D" title="4" lay-filter="filter">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="pre">上一题</button>
                <button type="button" class="layui-btn" id="submit">交卷</button>
                <button type="button" class="layui-btn layui-btn-primary" id="next">下一题</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>

    layui.use(['jquery', 'form', 'table', 'laypage', 'layer', 'laydate', 'tree', 'transfer', 'layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var layedit = layui.layedit;
        var form = layui.form;

        // 设置富文本编辑器

        layedit.set({
            uploadImage: {
                url: '/upload'
                , type: 'post'
            }
        });
        var build = layedit.build('option');

        // 获取答案
        function getAnswer() {
            // 选择题答案
            let option = $("input[type='radio']:checked").val();
            // 简答题答案
            let context = layedit.getContent(build);
            if (context !== '') {
                return context
            }
            $("input[type='radio']:checked").prop("checked", false)
            layedit.set(build, "", false)
            return option
        }



        let examId = CoreUtil.getUrlParam("examId");
        var topicList = [];
        var answerMap = new Map();
        var index = 0;
        // 加载服务端题目
        CoreUtil.sendAjax("/exam/topic/exam", {examId}, function (res) {
            res.forEach(topic => answerMap.set(topic.id, ""))
            topicList = res
            showTopic(0)
            index = 0;
        }, "GET", false, function (res) {
            //用户列表接口无权限回调
            layer.msg("抱歉！您暂无获取用户列表的权限");
        });

        var showTopic = function (index2) {

            if (index2 < 0) {
                index += 1
                layer.msg("没有上一题了！！")
                return;
            }
            if (index2 >= topicList.length) {
                index -= 1
                layer.msg("没有下一题了！！")
                return
            }
            let radios = $("input[type='radio']");
            radios.prop("checked", false)
            // 初始化
            layedit.setContent(build, "", false);
            let element = topicList[index];
            let type = element.type;
            console.log(type)
            if (type !== 1) {
                $("#options").show()
                $("#shortAnswer").hide()
            } else {
                $("#options").hide()
                $("#shortAnswer").show()
            }
            $("#id").val(element.id)
            $("#title").html(element.title)
            $("#content").html(element.content)

            $("#optionA").prop("title", element.optionA)
            $("#optionB").prop("title", element.optionB)
            $("#optionC").prop("title", element.optionC)
            $("#optionD").prop("title", element.optionD)

            // 获取 已经作答的答案
            let alreadyAnsweredValue = answerMap.get(element.id);
            if (alreadyAnsweredValue !== '') {
                radios.each(radio => {
                    if (alreadyAnsweredValue === $(radio).getAttribute("value"))
                        radio.prop("checked", true);
                })
                layedit.setContent(build, alreadyAnsweredValue, false);
            }
            form.render();
        }

        $("#pre").click(() => {
            answerMap.set(topicList[index].id, getAnswer())
            console.log(answerMap)
            index -= 1;
            showTopic(index)
        })
        $("#next").click(() => {
            answerMap.set(topicList[index].id, getAnswer())
            console.log(answerMap)
            index += 1;
            showTopic(index)
        })

        $("#submit").click(() => {
            answerMap.set(topicList[index].id, getAnswer())
            let result = Array.from(answerMap).map(
                data => ({
                    "topicId": data[0],
                    "option": data[1]
                })
            );
            const data = {
                examId,
                result
            }
            CoreUtil.sendAjax("/exam/exam/finishUpExam", JSON.stringify(data), function (res) {
                layer.msg(`完成试卷生成及阅卷系统，选择题得分:${res}，总分等待老师阅卷完成查询成绩！`)
                window.location.href = "/index/exam"
            }, "POST", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
            });
        })
    })


</script>

</html>
